import React from 'react';
import { Modal, Form, Input, Tabs, Switch, Button, Space } from 'antd';

type Platform = 'xiaohongshu' | 'wechat' | 'zhihu' | 'toutiao' | 'nowcoder' | 'baijiahao' | 'juejin';

interface PlatformConfig {
  name: string;
  enabled: boolean;
  credentials: Record<string, string>;
}

interface PlatformSettingsProps {
  open: boolean;
  onCancel: () => void;
  onSave: (values: Record<string, string>) => void;
  platformConfigs: Record<Platform, PlatformConfig>;
}

const { TabPane } = Tabs;

// 平台配置字段
const platformFields = {
  xiaohongshu: [
    { key: 'username', label: '用户名', required: true },
    { key: 'password', label: '密码', required: true, isPassword: true },
    { key: 'cookie', label: 'Cookie', required: false }
  ],
  wechat: [
    { key: 'appId', label: 'AppID', required: true },
    { key: 'appSecret', label: 'AppSecret', required: true, isPassword: true },
    { key: 'token', label: 'Token', required: true, isPassword: true }
  ],
  zhihu: [
    { key: 'username', label: '用户名', required: true },
    { key: 'password', label: '密码', required: true, isPassword: true },
    { key: 'cookie', label: 'Cookie', required: false }
  ],
  toutiao: [
    { key: 'appKey', label: 'AppKey', required: true },
    { key: 'appSecret', label: 'AppSecret', required: true, isPassword: true },
    { key: 'token', label: 'Token', required: true, isPassword: true }
  ],
  nowcoder: [
    { key: 'username', label: '用户名', required: true },
    { key: 'password', label: '密码', required: true, isPassword: true }
  ],
  baijiahao: [
    { key: 'appId', label: 'AppID', required: true },
    { key: 'appKey', label: 'AppKey', required: true },
    { key: 'appSecret', label: 'AppSecret', required: true, isPassword: true },
    { key: 'token', label: 'Token', required: true, isPassword: true }
  ],
  juejin: [
    { key: 'username', label: '用户名', required: true },
    { key: 'password', label: '密码', required: true, isPassword: true },
    { key: 'cookie', label: 'Cookie', required: false }
  ]
};

const PlatformSettings: React.FC<PlatformSettingsProps> = ({
  open,
  onCancel,
  onSave,
  platformConfigs
}) => {
  const [form] = Form.useForm();
  
  // 处理表单提交
  const handleSubmit = () => {
    form.validateFields().then(values => {
      onSave(values);
    });
  };
  
  // 处理平台启用状态切换
  const handlePlatformToggle = (platform: Platform, enabled: boolean) => {
    const updatedConfigs = { ...platformConfigs };
    updatedConfigs[platform].enabled = enabled;
    
    // 更新表单中的值
    const formValues = form.getFieldsValue();
    form.setFieldsValue(formValues);
  };
  
  return (
    <Modal
      title="平台设置"
      open={open}
      onCancel={onCancel}
      width={600}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="save" type="primary" onClick={handleSubmit}>
          保存
        </Button>
      ]}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={
          Object.entries(platformConfigs).reduce((acc, [platform, config]) => {
            Object.entries(config.credentials).forEach(([key, value]) => {
              acc[`${platform}_${key}`] = value;
            });
            return acc;
          }, {} as Record<string, string>)
        }
      >
        <Tabs defaultActiveKey="xiaohongshu">
          {Object.entries(platformConfigs).map(([platform, config]) => (
            <TabPane tab={config.name} key={platform}>
              <Space direction="vertical" style={{ width: '100%' }}>
                <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span>启用{config.name}</span>
                  <Switch
                    checked={config.enabled}
                    onChange={(checked) => handlePlatformToggle(platform as Platform, checked)}
                  />
                </div>
                
                {platformFields[platform as Platform].map(field => (
                  <Form.Item
                    key={field.key}
                    name={`${platform}_${field.key}`}
                    label={field.label}
                    rules={[{ required: field.required, message: `请输入${field.label}` }]}
                  >
                    {field.isPassword ? (
                      <Input.Password placeholder={`请输入${field.label}`} disabled={!config.enabled} />
                    ) : (
                      <Input placeholder={`请输入${field.label}`} disabled={!config.enabled} />
                    )}
                  </Form.Item>
                ))}
              </Space>
            </TabPane>
          ))}
        </Tabs>
      </Form>
    </Modal>
  );
};

export default PlatformSettings;
